import Vue from 'vue'
import Component from 'vue-class-component'
import { Toast, MessageBox} from 'mint-ui'

@Component
export default class ModifyPwClass extends Vue {
  account = ''
  code = ''
  password = ''
  codeBtnTitle = '发送验证码'
  times = 60
  t = Object
  type = 'password'
  isOpen = false
  fromType = ''

  created() {
    this.fromType = this.$route.params.type
    this.account = this.$store.getters.user.phone
  }

  handlePop () {
    if (this.fromType && this.fromType.length > 0) {
      this.$router.go(-1)
    } else {
      this.$store.commit('setModifyPw', '0')
    }
  }

  async handleSendCode () {
    if (this.account.length <= 0) {
      Toast('手机号码有误')
      return
    }
    let url = '/user/v1/password/vcode'
    try {
      const response = await this.$axios.post(url, {phone: this.account})
      if (response.status === 0) {
        this.t = setInterval(this.countTimes, 1000)
      }
    } catch (e) {
      console.log(e)
    }
  }

  countTimes() {
    this.times--
    this.codeBtnTitle = '(' + this.times + ')' + 's'
    if (this.times === 0) {
      this.times = 60
      this.codeBtnTitle = '重新发送'
      clearInterval(this.t)
    }
  }

  async handleSure () {
    if (!this.account || this.account.length <= 0) {
      Toast('手机号码有误')
      return
    }
    if (!this.code || this.code.length <= 0) {
      Toast('请输入验证码')
      return
    }
    if (!this.password || this.password.length <= 0) {
      Toast('请输入密码')
      return
    }
    let url = '/user/v1/password/modify'
    try {
      const response = await this.$axios.post(url, {phone: this.account, vcode: this.code, password: this.password})
      if (response.status === 0) {
        Toast('修改成功')
        this.handlePop()
      } else {
        Toast('修改失败')
      }
    } catch (e) {
      Toast('修改失败')
      console.log(e)
    }
  }

  handleSeePw () {
    if (this.type === 'password') {
      this.type = 'number'
      this.isOpen = true
    } else {
      this.type = 'password'
      this.isOpen = false
    }
  }

  render () {
    return (
      <div class='content' style='background-color:#fff;height:667px'>
        <mt-header class='header' fixed title="修改登录密码">
          <mt-button onClick={this.handlePop} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        <div class="page-part" style='margin-top:64px;padding:0 5%'>
          <div class = 'modifyStyleClass' style='padding:20px 0'>
            <div><mt-field disabled={(this.fromType && this.fromType.length > 0)} placeholder="登录账号" v-model={this.account} type="number">
            <p onClick={this.handleSendCode} style='color:#ff4545;font-size:13px;line-height:40px'>{this.codeBtnTitle}</p>
            </mt-field>
            </div>
            <div><mt-field placeholder="验证码" v-model={this.code} type="number"></mt-field></div>
            <div>
            <mt-field placeholder="新密码" type={this.type} v-model={this.password}>
              <div style='width:40px;text-align:right' onClick={this.handleSeePw} v-show={!this.isOpen}><icon name='closeEar' scale='2'/></div>
              <div style='width:40px;text-align:right' onClick={this.handleSeePw} v-show={this.isOpen}><icon name='openEar' scale='2'/></div>
            </mt-field>
            </div>
          </div>

          <div onClick={this.handleSure} class="defaultButton">确认</div>
        </div>
      </div>
    )
  }
}
